<template>
  <div class="monitoring-page">
    <!-- 班级选择 -->
    <van-field
        v-model="monitoring.className"
        placeholder="请选择班级"
        label="班级："
        is-link
        readonly
        @click="showClassPicker = true"
        class="text"
    >
    </van-field>
    <van-popup v-model:show="showClassPicker" round position="bottom">
      <van-picker :columns="classOptions" @confirm="onClassConfirm" @cancel="showClassPicker = false" />
    </van-popup>

    <!-- 日期选择器 -->
    <van-field
        v-model="monitoring.date"
        placeholder="请选择日期"
        label="日期："
        is-link
        readonly
        @click="handleDatePickerClick"
        class="text"
    >
    </van-field>
    <van-popup v-model:show="showCalendar" round position="bottom">
      <van-calendar
          v-model:show="showCalendar"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onDateConfirm"
          @cancel="showCalendar = false"
          color="rgba(101, 242, 13, 0.622)"
      />
    </van-popup>

    <!-- 文件上传 -->
    <van-field v-model="uploadFileName" label="上传视频" readonly placeholder="选择视频" @click="triggerFileInput" />
    <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" />

    <!-- 提交和取消按钮 -->
    <div class="button-group">
      <van-button
          type="primary"
          class="submit-button"
          @click="submitMonitoring"
      >
        提交信息
      </van-button>
      <van-button
          type="warning"
          class="cancel-button"
          @click="cancelMonitoring"
      >
        取消
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Toast } from 'vant';
import axios from 'axios';

// 定义监控信息
const monitoring = reactive({
  classId: '',
  className: '',
  date: '',
  video: null
});

const uploadFileName = ref('');

// 班级选项
const classOptions = ref([]);

// 控制日历显示隐藏
const showCalendar = ref(false);
const minDate = new Date(2020, 0, 1);
const maxDate = ref(new Date());
const showClassPicker = ref(false);

// 获取班级选项
const fetchClassOptions = async () => {
  try {
    const response = await axios.get('/api/monitoring/classes');
    classOptions.value = response.data.data.map(cls => ({
      text: `Class ${cls}`,
      value: cls
    }));
  } catch (error) {
    console.error('Failed to fetch class options:', error);
  }
};

// 确认选择的班级
const onClassConfirm = (value) => {
  monitoring.classId = value.value;
  monitoring.className = value.text;
  showClassPicker.value = false;
};

// 点击日期选择器
const handleDatePickerClick = () => {
  console.log('Date picker clicked'); // 添加调试信息
  showCalendar.value = true;
};

// 确认选择的日期
const onDateConfirm = (value) => {
  monitoring.date = value.toISOString().split('T')[0]; // 使用 YYYY-MM-DD 格式
  showCalendar.value = false;
};

// 文件上传处理
const triggerFileInput = () => {
  document.querySelector('input[type="file"]').click();
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    monitoring.video = file;
    uploadFileName.value = file.name;
  }
};

// 提交监控信息
const submitMonitoring = async () => {
  if (!monitoring.classId || !monitoring.date || !monitoring.video) {
    Toast.fail('请先选择班级、日期并上传视频文件');
    return;
  }

  try {
    const formData = new FormData();
    formData.append('classId', monitoring.classId);
    formData.append('time', monitoring.date);
    formData.append('file', monitoring.video);

    const response = await axios.post('/api/monitoring/upload', formData);
    if (response.data.code === 2000) {
      Toast.success('提交成功');
      monitoring.classId = '';
      monitoring.className = '';
      monitoring.date = '';
      monitoring.video = null;
      uploadFileName.value = '';
    } else {
      Toast.fail(response.data.message);
    }
  } catch (error) {
    Toast.fail('提交失败');
    console.error('Failed to submit monitoring info:', error);
  }
};

// 取消提交
const cancelMonitoring = () => {
  monitoring.classId = '';
  monitoring.className = '';
  monitoring.date = '';
  monitoring.video = null;
  uploadFileName.value = '';
  Toast.fail('已取消');
};

// 页面加载时获取班级选项
onMounted(() => {
  fetchClassOptions();
});
</script>

<style scoped>
:root{
  --van-field-label-width: 100%;
}

.monitoring-page {
  padding: 20px;
  margin: 15px;
  height: 100%;
}

.text {
  margin: 5px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #1e1f22;
  width: 100%;
}

.submit-button, .cancel-button {
  margin: 10px 0;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  width: 200px;
}

.submit-button {
  background-color: rgba(101, 242, 13, 0.622);
}

.cancel-button {
  background-color: #ff9800;
}

.button-group {
  display: flex;
  justify-content: space-around;
}
</style>
